let Utils = require("../../../framework/js/utils");

class AuiGrid extends window.AUI.BaseComponent {
    constructor(name) {
        super(name);
        this.props = {
            layoutclass: {
                type: Object,
                default: {
                }
            },
            itemclass: {
                type: Object,
                default: {
                    "aui-col-xs-12": true,
                    "aui-col-md-6": true,
                    "aui-col-lg-3": true
                }
            }
        };
        this.methods = {
            setData(data) {
                var self = this;
                if (data && _.isArray(data) && data.length > 0) {
                    self.rows = data.map(function (v, index) {
                        var a = [];
                        self.rules.forEach(function (rule) {
                            if (rule.hasOwnProperty("value")) {
                                var item = rule.value(v);
                                if (item) {
                                    a.push({
                                        value: item,
                                        key: "key"
                                    });
                                } else {
                                    if (rule.hasOwnProperty("defaultval")) {
                                        a.push(rule.defaultval);
                                    } else {
                                        a.push("");
                                    }
                                }
                            }
                        });
                        return {
                            $index: index,
                            $item: v,
                            data: a
                        };
                    });
                } else {
                    console.error("grid 设置data错误");
                }
            },
            setRules (rules) {
                this.rules = rules;
                this.keys = rules.map(function (v) {
                    return v.key;
                });
            }
        }

    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
<div class="aui-layout aui-layout-grid" :class="layoutclass">
    <div class="aui-layout__item" :class="itemclass">
    item
    </div>
</div>
</div>`;
    }
    _data() {
        var ret = {};
        ret.rows = [];
        return ret;
    }
    static defineRules(rules) {
        var res = [];
        _.forEach(rules, function (rule, rulekey) {
            var k = {};
            if (_.isString(rule)) {
                k = {
                    key: rule
                }
            } else {
                k = rule;
                if (_.isFunction(rule.key)) {
                    k.key = rule.key()
                }
            }
            if(!k.value) {
                k.value = function (item) {
                    return item[rulekey]
                };
            }
            res.push(k);
        });
        return res;
    }
}

window.AUI.customCompoents.define("aui-grid", class extends AuiGrid {
    constructor(name) {
        super(name);
    }
    _template() {
        var self = this;
return `<div class="${self._name}">
<div class="${self._name}__row" v-for="row,index in rows">
    <div class="aui-layout aui-layout-grid" :class="layoutclass">
        <div class="aui-layout__item" v-for="item in row.data" :class="itemclass">
            <div class="${self._name}-item"> <div class="${self._name}-item__key">{{item.key}}</div>：<div class="${self._name}-item__value">{{item.value}}</div></div>
        </div>
    </div>
</div>
</div>`;
    }
    static defineRules(rules) {
        return super.defineRules(rules);
    }
});